<template>
	<view class="review">
		<NavBar :title="title"/>
		<view class="content">
			<!-- 店铺评价 -->
			<view class="shop-review" v-if="reviewType == '1'">
				<view class="review-title"> 店铺评价 </view>
				<view class="review-mark">
					<view class="label"> 您的打分 </view>
					<view class="value"> 
						<uni-rate v-model="star" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onChange" />
						<view class="rate"> 很好 </view>
					</view>
				</view>
				<view class="review-content">
					<textarea placeholder="该店铺满足了您的服务要求吗？"></textarea>
					<view class="add"> </view>
				</view>
			</view>
			<!-- 商品评价 -->
			<view class="goods-review" v-if="reviewType == '2'">
				<view class="top-info">
					<view class="review-title"> 商品评价 </view>
					<view class="goods-info">
						<image src="/static/icon/ti01.png" class="g-img"/>
						<view class="goods">
							<view class="goods-title"> 啊是第几啊死哦到静安寺哦点击 </view>
							<view class="goods-desc"> 豪华套餐 ；奥萨蒂阿森纳 </view>
							<view class="goods-price">
								<text>￥</text>
								<text>29.99</text>
								<text>原价：￥369</text>
							</view>
						</view>
					</view>
				</view>
				<view class="review-info">
					<view class="item">
						<view class="label"> 商品质量 </view>
						<view class="value"> 
							<uni-rate v-model="star" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onChange" />
							<view class="rate"> 很好 </view>
						</view>
					</view>
					<view class="item">
						<view class="label"> 配送服务 </view>
						<view class="value"> 
							<uni-rate v-model="star" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onChange" />
							<view class="rate"> 很好 </view>
						</view>
					</view>
					<view class="review-content">
						<textarea placeholder="该商品满足了您的要求吗？"></textarea>
						<view class="add"> </view>
					</view>
				</view>
			</view>
			<!-- 配送员评价 -->
			<view class="man-review" v-if="reviewType==3">
				<view class="review-title"> 评价用户 </view>
				<view class="review-mark">
					<view class="label"> 您的打分 </view>
					<view class="value"> 
						<uni-rate v-model="star" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onChange" />
						<view class="rate"> {{star==1?'差':star==2?'一般':star==3?'好':star==4?'很好':'超棒'}} </view>
					</view>
				</view>
				<view class="review-content">
					<textarea placeholder="请输入您的评价" maxlength="-1"></textarea>
				</view>
			</view>
			<view class="review-btn" @tap="submit"> 立即评价 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import ChooseBtn from '@/components/ChooseBtn.vue'
	import { EvaUserApi } from '@/service/rider.js'
	const title = ref()
	const reviewType = ref('1')
	const star = ref(3)
	const onChange = (e) => {
		console.log(e.value);
		star.value = e.value
	}
	const submit = () => {}
	onLoad((e) => {
		const { type } = e
		// type 3：骑手评价用户
		reviewType.value = type
		if(type==3) {
			title.value = '评价用户'
		}
	})
</script>

<style lang="scss" scoped>
	.review {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.shop-review, .man-review {
			padding: 15px 12px;
			border-radius: 10px;
			background-color: #fff;
			.review-title {
				font-weight: 500;
				font-size: 16px;
				color: #333333;
				line-height: 20px;
			}
			.review-mark {
				display: flex;
				align-items: center;
				height: 50px;
				margin-top: 5px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.label {
					font-weight: 400;
					font-size: 16px;
					color: #333333;
				}
				.value {
					font-weight: 400;
					font-size: 14px;
					color: #999999;
					display: flex;
					align-items: center;
					margin-left: 20px;
					.rate {
						margin-left: 14px;
					}
				}
			}
			.review-content {
				padding-top: 15px;
				textarea {
					width: 100%;
					height: 100px;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.goods-review {
			.top-info, .review-info {
				padding: 15px 12px;
				background-color: #fff;
				border-radius: 10px;
				margin-bottom: 10px;
				.review-title {
					font-weight: 500;
					font-size: 16px;
					color: #333333;
					line-height: 20px;
					margin-bottom: 15px;
				}
				.goods-info {
					display: flex;
					.g-img {
						width: 80px;
						height: 80px;
						border-radius: 10px;
						margin-right: 10px;
					}
					.goods {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.goods-title {
							width: 173px;
							font-weight: 500;
							font-size: 14px;
							color: #3D3D3D;
							line-height: 16px;
							overflow: hidden; /* 隐藏溢出的内容 */
							white-space: nowrap; /* 禁止文本换行 */
							text-overflow: ellipsis; /* 添加省略号 */
						}
						.goods-desc {
							font-weight: 400;
							font-size: 12px;
							color: #999999;
							line-height: 16px;
						}
						.goods-price {
							font-weight: 600;
							font-size: 10px;
							color: #FF3B1E;
							line-height: 20px;
							margin-bottom: 15px;
							text { 
								&:nth-of-type(2) {
									font-size: 15px;
								}
								&:nth-last-of-type(1) {
									font-weight: 300;
									font-size: 11px;
									color: #AAAAAA;
									line-height: 11px;
									margin-left: 10px;
								}
							}
						}
					}
				}
			}
			.review-info {
				.item {
					display: flex;
					align-items: center;
					height: 50px;
					border-bottom: 1px solid #eeeeee;
					.label {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						margin-right: 20px;
					}
					.value {
						display: flex;
						color: #999999;
						font-size: 14px;
						font-weight: 400;
						align-items: center;
						.rate {
							margin-left: 11px;
						}
					}
				}
				.review-content {
					padding-top: 15px;
					textarea {
						width: 100%;
						height: 100px;
						color: #C4C4C4;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
					}
				}
			}
		}
		.review-btn {
			margin-top: 20px;
			height: 50px;
			line-height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
		.add {
			position: relative;
			width: 74px;
			height: 74px;
			border-radius: 10px;
			background: #F4F4F4;
			margin-top: 10px;
			&::before, &::after {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: block;
				content: '';
				width: 24px;
				height: 2px;
				background: #D8D8D8;
			}
			&::after {
				width: 2px;
				height: 24px;
			}
		}
	}
</style>
